<template>
	<view class="all">
		<!-- 必填项 -->
		<view class="info_must">
			
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">模板名称</text>
					<input class="input" placeholder="请填写出发地" placeholder-class="placeholder" type="text" v-model="name" value="" />
				</view>
			</view>
			
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">手机号</text>
					<input class="input_phone" placeholder="请填写手机号" placeholder-class="placeholder" type="text" v-model="phone" value="" />
				</view>
				<button class="phone_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="phone == ''">获取</button>
			</view>
			
			
			
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">出发地</text>
					<input class="input" placeholder="请填写出发地" placeholder-class="placeholder" type="text" v-model="departurePlace" value="" />
				</view>
			</view>
			
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">目的地</text>
					<input class="input" placeholder="请填写目的地" placeholder-class="placeholder" type="text" v-model="destination" value="" />
				</view>
			</view>
			
			
			<view class="info_must_one" @click="openChoosePerson()">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">{{type==0 ? '座位数' : '人数'}}</text>
					<input class="input" :placeholder="type==0 ? '请填写座位数' : '请填写人数'"  placeholder-class="placeholder" type="number" disabled="true" v-model="personNum" value="" />
				</view>
			</view>
		</view>
		
		
		<!-- 选填项 -->
		<view class="pass" v-if="type == 0">
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">途经</text>
					<input class="input" placeholder="请添加途经 （选填）"  placeholder-class="placeholder" type="text" v-model="route" value="" />
				</view>
			</view>
		</view>
		
		<textarea class="textarea" value="" placeholder="请添加备注 （选填）" placeholder-class="placeholder" v-model="ps"></textarea>
		<view class="isDefault">
			<text class="isDefault_title">设为默认模板</text>
			<switch checked @change="switchChange" style="transform:scale(0.7)" color="#4687FF" />
		</view>
		
		<text class="deleteT" @click="deleteT">删除模板</text>
		
		<view class="release_btn">
			<text class="btn" @click="setTemplate">确定</text>
		</view>
		
		<uni-popup ref="personNum" type="bottom">
			<view class="choose_person_num">
				<text class="choose_person_num_one" v-for="(item,index) of personNumList" :key="index" @click="choosePerson(item)">{{item}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {addTemplate,wxUserPhone} from '@/Service/login.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {setMyTemplate,deleteMyT} from '@/Service/homeService.js'
	export default {
		components: {uniPopup},
		data() {
			return {
				type:'',
				phone:'',//电话
				name:'',//模板名称
				departurePlace:'',//出发地
				destination:'',//目的地
				personNum:'',//座位数，人数
				personNumList:[1,2,3,4],
				route:'',//途经
				ps:'',//备注
				isDefault:true,//是否默认
				id:null,//当前模板id
			}
		},
		onLoad(option) {
			let item = JSON.parse(option.item)
			this.id = item.id
			this.phone = item.phone
			this.name = item.name
			this.departurePlace = item.departurePlace
			this.destination = item.destination
			this.personNum = item.quantity
			this.route = item.pass
			this.ps = item.remark
			this.type = option.type
			this.phone = (uni.getStorageSync("phone")?uni.getStorageSync("phone"):'');
		},
		methods: {
			//获取手机号
			getPhoneNumber(e){
				let self = this
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					console.log('用户点击允许')
					uni.login({
						provider:"weixin",
						success:(login_ret => {
							let params = {
								code:login_ret.code,
								encryptedData:e.detail.encryptedData,
								iv:e.detail.iv,
							}
							wxUserPhone(params).then((ret) => {
								if (ret.data.code == 20007 && !status) {
									// self.getPhoneNumber(e, true);
									self.Toast('获取手机号失败，请重试~');
								} else {
									self.phone = ret.data.data
									uni.setStorageSync('phone', ret.data.data)
								}
							}).catch((err) => {
								console.log(err)
							})
						})
					})
					
				}else{
					console.log('用户点击拒绝')
				}
			},
			//打开选择人数
			openChoosePerson(){
				this.$refs.personNum.open();
			},
			
			//选择人数
			choosePerson(item){
				console.log(item)
				this.personNum = item
				this.$refs.personNum.close();
			},
			switchChange(e){
				console.log(e.detail)
				this.isDefault = e.detail.value
			},
			
			//确认编辑
			setTemplate(){
				console.log('确认编辑')
				let self = this
				this.judgeUpData()
				let params = {
					name:self.name,
					departurePlace:self.departurePlace,//出发地
					destination:self.destination,//目的地
					phone:self.phone,//手机号
					type:self.type,
					quantity:self.personNum,//人数或座位数
					pass:self.route,//途经
					remark:self.ps,//备注
					isDefault:self.isDefault,//是否设置为默认
				}
				console.log(params)
				setMyTemplate(self.id,params).then((ret) => {
					console.log(JSON.stringify(ret))
					if(ret.code==0){
						self.ToastSuccess('修改成功')
						setTimeout(function(){ 
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					}else{
						self.Toast(ret.msg)
					}
				}).catch((err) => {
					console.log(JSON.stringify(err))
				})
			},
			
			//删除模板
			deleteT(){
				deleteMyT(this.id).then((ret) => {
					console.log(JSON.stringify(ret))
					if(ret.code==0){
						self.ToastSuccess('删除成功')
						setTimeout(function(){ 
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					}else{
						self.Toast(ret.msg)
					}
				}).catch((err) => {
					console.log(JSON.stringify(err))
				})
			},
			
			//发布前判断
			judgeUpData(){
				let self = this
				let judge = true
				if(self.name == ''){
					self.Toast('请填写模板名称')
					return false
				}
				if(self.phone == ''){
					self.Toast('请填写手机号')
					return false
				}
				if(self.departurePlace == ''){
					self.Toast('请填写出发地')
					return false
				}
				if(self.destination == ''){
					self.Toast('请填写目的地')
					return false
				}
				if(self.personNum == ''){
					self.Toast('请填写数量')
					return false
				}
				
				return judge
			},
			
			//普通toast
			Toast(e){
				uni.showToast({
				    title: e,
					icon:'none',
				    duration: 2000
				});
			},
			ToastSuccess(e){
				uni.showToast({
				    title: e,
					icon:'success',
				    duration: 2000
				});
			}
		}
	}
</script>

<style>
	page{
		font-family: Source Han Sans CN;
		background-color: #F8F8F8;
	}
	.all{
		padding: 20upx 30upx;
	}
	
	.info_must{
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 0 30upx;
	}
	.info_must_one{
		height: 110upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #FFFFFF;
	}
	.info_must_one_title_input{
		display: flex;
		align-items: center;
	}
	.info_must_one_title{
		display: block;
		font-size: 28upx;
		color: #343434;
		width: 120upx;
	}
	.input{
		font-size: 26upx;
		color: #343434;
		width: 450upx;
	}
	.placeholder{
		font-size: 26upx;
		color: #9A9A9A;
	}
	.more_icon{
		width: 14upx;
		height: 24upx;
	}
	
	.pass{
		background-color: #FFFFFF;
		height: 110upx;
		padding: 0 30upx;
		margin-top: 20upx;
		border-radius: 20upx;
	}
	.textarea{
		margin-top: 20upx;
		background-color: #FFFFFF;
		width: 630upx;
		height: 180upx;
		padding: 26upx 30upx;
		font-size: 26upx;
		color: #343434;
		border-radius: 20upx;
	}
	
	
	.release_btn{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80upx;
	}
	.btn{
		display: block;
		width: 600upx;
		height: 88upx;
		background-color: #4687FF;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	
	.input_phone{
		font-size: 26upx;
		color: #343434;
		width: 400upx;
	}
	.phone_btn{
		width: 100upx;
		height: 45upx;
		border-radius: 6upx;
		border: 2upx solid #4687FF;
		line-height: 38upx;
		padding: 0;
		color: #007AFF;
		font-size: 24upx;
		text-align: center;
	}
	
	.choose_person_num{
		height: 550upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
		padding: 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.choose_person_num_one{
		display: block;
		text-align: center;
		height: 88upx;
		border-bottom: 2upx solid #a1a1a1;
		width: 450upx;
	}
	
	.isDefault{
		height: 110upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding-left: 30upx;
		border-radius: 20upx;
	}
	.isDefault_title{
		display: block;
		font-size: 26upx;
		color: #333333;
	}
	.deleteT{
		display: block;
		line-height: 68upx;
		font-size: 26upx;
		color: #F83B3B;
	}
</style>
